<template>
  <div class="yjq_container">
    <!-- 搜索 -->
    <van-nav-bar title="特色课">
      <template #right>
        <van-icon name="search" size="26" color="grey" />
      </template>
    </van-nav-bar>
    <!-- 二级导航 -->
    <van-dropdown-menu>
      <van-dropdown-item title="分类">
        <div class="yjq_title_headjj">
          <div class="yjq_text">年级</div>
          <ul>
            <li
              v-for="(item, index) in classa"
              :key="index"
              @click="fenlei(item.name)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="yjq_title_body">
          <div class="yjq_text">学科</div>
          <ul>
            <li v-for="(item, index) in subject" :key="index" > 
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="yjq_title_foot">
          <button class="butn1">重置</button>
          <button class="butn2">确定</button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="排序">
        <div class="yjq_paixu_container">
          <div
            class="yjq_paixu_title"
            v-for="(item, index) in option2"
            :key="index"
          >
            {{ item.text }}
          </div>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="筛选">
        <div class="yjq_shaixuan_container">
          <ul>
            <li v-for="(item, index) in screen" :key="index">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 数据渲染 -->
    <!-- <div  class="yjq_shuju_container">
      <van-list
      class="yjq_shuju_body"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      > <van-cell v-for="(item, index) in list" :key="index"  class="VAN_cel">
          <div class="yjq_title"></div>
        </van-cell>
      </van-list>
    </div> -->
    <div class="yjq_shuju_container">
      <van-list
        class="yjq_shuju_bo"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" class="yjq_xuanran">
          <div class="yjq_biaoti">{{ item.title }}</div>
          <div class="yjq_time">
            {{ item.start_play_date | filtersatart }}~
            {{ item.end_play_date | filterend }} | 共{{
              item.total_periods
            }}课时
          </div>
          <div class="yjq_xinxi">
            <img :src="item.teachers_list[0].teacher_avatar" alt="" />
            <span>{{ item.teachers_list[0].teacher_name }}</span>
          </div>
          <div class="yjq_baoming">
            <span>{{ item.sales_num }}人已报名</span>
            <div @click="search(item.id)">免费</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { characteristic, solt } from "../../../../request/http";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      classa: [
        { name: "初一" },
        { name: "初二" },
        { name: "初三" },
        { name: "高一" },
        { name: "高二" },
      ],
      subject: [
        { name: "语文" },
        { name: "数学" },
        { name: "英语" },
        { name: "物理" },
        { name: "化学" },
      ],
      option2: [
        { text: "综合排序", value: "a" },
        { text: "最新", value: "b" },
        { text: "最热", value: "c" },
        { text: "价格从低到高", value: "c" },
        { text: "价格从高到底", value: "c" },
      ],
      screen: [
        { name: "全部" },
        { name: "大班课" },
        { name: "小班课" },
        { name: "公开课" },
        { name: "点播课" },
        { name: "面授课" },
        { name: "音频课" },
        { name: "系统课" },
        { name: "图文课" },
        { name: "会员课" },
      ],
      list: [],
      loading: false,
      finished: true,
      total: 0,
      params: {
        page: 1,
        order_bay: 0,
        course_type: 0,
        classify_id: 0,
      },
      classification: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    characteristic().then((res) => {
      console.log(res);
      this.list = res.list;
      this.finished = false;
      this.total = res.total;
    });
    solt().then((res) => {
      // console.log(res);
      this.classification = res.list;
    });
  },
  methods: {
    //搜索
    search(id){
      this.$router.push({path:'/yjq_search',query:{id}})
    },
    onLoad() {
      this.params.page++;
      characteristic({ page: this.params.page }).then((res) => {
        // console.log(res);
        const { current_page, list, last_page } = res;
        this.loading = false;
        //停止触发
        // if(list.length==0&&this.page!=1){
        //   this.finished=true

        //   return
        // }
        // 数据全部加载完成
        if (this.list.length >= this.total) {
          this.finished = true;
        }

        this.list.last_page = last_page;
        this.list.current_page = current_page;
        // console.log(this.list.current_page);
        this.list = [...this.list, ...list];
      });
    },
    //分类
    fenlei(val) {
      var list = null;
      this.classification.forEach((item) => {
        // console.log(item);
        if (item.title == val) {
          item = this.list;
        }
      });
      this.list = this.list;
    },
  },
  filters: {
    //开始时间
    filtersatart(val) {
      var date = new Date(val * 1000);
      var month = date.getMonth() + 1; //月
      var datee = date.getDate(); //星期
      var time = month + "月" + datee + "日";
      function getTimerr() {
        var time = new Date();
        var hour = time.getUTCHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return hour + ":" + minute;
      }
      return time + "" + getTimerr();
    },
    //结束时间
    filterend(vals) {
      var date = new Date(vals * 1000);
      var month = date.getMonth() + 1; //月
      var datee = date.getDate() + 5; //星期
      var time = month + "月" + datee + "日";
      function getTimerr() {
        var time = new Date();
        var hour = time.getUTCHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return hour + ":" + minute;
      }
      return time + "" + getTimerr();
    },
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
}
.yjq_container {
  width: 100%;
}
.yjq_body {
  width: 100%;
  height: 520px;
  background-color: yellow;
}
.yjq_title_headjj {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  border-bottom: 1px solid #f1f1f1;
  .yjq_text {
    width: 100%;
    font-size: 14px;
  }
  ul {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 22%;
      height: 36px;
      background-color: #f5f5f5;
      margin-bottom: 20px;
      margin-top: 10px;
      font-size: 14px;
      color: gray;
      text-align: center;
      line-height: 36px;
    }
    li:hover{
      background-color: orange;
    }
  }
}
.yjq_title_body {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  border-bottom: 1px solid #f1f1f1;
  .yjq_text {
    width: 100%;
    font-size: 14px;
  }
  ul {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 22%;
      height: 36px;
      background-color: #f5f5f5;
      margin-bottom: 10px;
      margin-top: 10px;
      font-size: 14px;
      color: gray;
      text-align: center;
      line-height: 36px;
      color: #595959;
    }
    li:hover{
      background-color: orange;
    }
  }
}
.yjq_title_foot {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 10px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  .butn1 {
    width: 46%;
    height: 36px;
    font-size: 14px;
    border: #f1f1f1 1px solid;
    outline: none;
    background-color: white;
    border-radius: 6px;
  }
  .butn2 {
    width: 46%;
    height: 36px;
    font-size: 14px;
    border: none;
    outline: none;
    color: white;
    background-color: #eb6100;
    border-radius: 6px;
  }
}
.yjq_paixu_container {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  .yjq_paixu_title {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    color: #595959;
  }
  .yjq_paixu_title:hover{
    background-color: orange;
  }
}
.yjq_shaixuan_container {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;

  ul {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;

    li {
      width: 22%;
      height: 36px;
      background-color: #f5f5f5;
      margin: 10px 5px;
      font-size: 14px;
      color: gray;
      text-align: center;
      line-height: 36px;
      color: #595959;
    }
    li:hover{
      background-color: orange;
    }
  }
}

.yjq_shuju_container {
  width: 100%;
  height: 520px;
  background-color: #f0f2f5;

  overflow: scroll;
}
// .yjq_shuju_bo{
//   width: 100%;
//   background-color: #F0F2F5;
// }
.yjq_xuanran {
  width: 92%;
  height: 200px;
  background-color: white;
  border-radius: 5px;
  margin: 20px auto;
  box-sizing: border-box;
  padding: 20px;
  .yjq_biaoti {
    font-size: 16px;
    margin-top: 10px;
  }
  .yjq_time {
    margin-top: 10px;
    font-size: 12px;
    color: gray;
  }
  .yjq_xinxi {
    width: 100%;
    height: 70px;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50px;
      margin-right: 10px;
    }
    span {
      font-size: 14px;
      color: gray;
    }
  }
  .yjq_baoming {
    width: 100%;
    height: 48px;
    // background-color: antiquewhite;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 14px;
      color: gray;
    }
    div {
      font-size: 18px;
      color: #54b436;
      // font-weight: bold;
    }
  }
}
</style>
 